<template>
    <el-row>
        <el-col>用户名</el-col>
        <el-col>
            <el-input v-model="info.UserName" style="width: 240px" placeholder="请输入用户名" />
        </el-col>
    </el-row>
    <el-row>
        <el-col>密码</el-col>
        <el-col>
            <el-input type="password" v-model="info.UserPwd" style="width: 240px" placeholder="请输入密码" />
        </el-col> 
    </el-row>
    <el-row>
        <el-col>验证码</el-col>
        <el-col>
            <el-input v-model="info.code" style="width: 240px" placeholder="请输入验证码" />
            <el-tag type="primary">{{ code }}</el-tag>
            <el-button type="primary" @click="yzm">换一张</el-button>
        </el-col> 
    </el-row>
    <el-row>
        <el-col>
            <el-checkbox v-model="jzmm" label="记住密码" size="large" />
        </el-col> 
    </el-row>
    <el-row>
        <el-col>
            <el-button type="primary" @click="deng">登录</el-button>
        </el-col>
    </el-row>
</template>

<script setup lang="ts">
import {ref,onMounted,reactive} from 'vue'
import { ElMessage } from 'element-plus';
import { useCounterStore } from '@/stores/counter'
import axiosInstance from '@/utils/axiosHelper'
const counterStore = useCounterStore()
import {useRouter} from 'vue-router'
const router = useRouter();
import {api1,api2} from '@/main'
import Cookies from 'js-cookie'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import { useUserStore } from '@/stores/user';
const useStore=useUserStore();
const info=ref({
    UserName:"",
    UserPwd:"",
    code:''
})

const code=ref('');
const jzmm=ref(false);

onMounted(()=>{
    yzm();

    const UserName = Cookies.get('UserName');
    const UserPwd=Cookies.get('UserPwd');
  if (UserName) {
    info.value.UserName = UserName
    info.value.UserPwd =UserPwd
    jzmm.value = true
  }
})

const yzm=()=>{
    var chars='123456789qwertyupasdfghjkzxcvbnnmQWERTYUPASDFGHJKZXCVBNM';
    var result='';
    for(var i=0;i<4;i++)
    {
        var index=Math.floor(Math.random()*chars.length);
        result+=chars[index];
    }
    code.value=result;
}


const deng=()=>{
    if(info.value.UserName=="")
    {
        ElMessage.error("用户名不能为空");
        return;
    }
    if(info.value.UserPwd=="")
    {
        ElMessage.error("密码不能为空");
        return;
    }
    axiosInstance({
    url:"/api/Login/Login",
    method:"get",
    params:{
        UserName:info.value.UserName,
        UserPwd:info.value.UserPwd
    }
  })
  .then(res=>{
        console.log(res.data);
        sessionStorage.setItem('token', res.data.Token)
        console.log(res.data.Token);
        useStore.userinfo.Token=res.data.Token;
        useStore.userinfo=res.data;
        localStorage.setItem('UserName', info.value.UserName)
        localStorage.setItem('Token', res.data.Token)
        if(jzmm.value)
        {
            Cookies.set('UserName',info.value.UserName);
            Cookies.set('UserPwd',info.value.UserPwd);
        }
        else{
            Cookies.remove('UserName');
            Cookies.remove('UserPwd');
        }
        router.push("/MenuView");
  })
}
</script>